import './Scss/GantryCraneVideo.scss'
import { useState } from 'react'
import { useRequest } from 'ahooks'
import { useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { Result, Pagination } from 'antd'
import { Video } from '../../../../Common/Configure/Video'

export const GantryCraneVideo001 = () => {
    const [PageIndex, setPageIndex] = useState(1)

    const [Data, setData] = useState([])

    const { runAsync: getGantryCrane } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const [{ cameras }] = res.list
            setData(cameras)
        },
    })

    useEffect(() => {
        getGantryCrane({ url: 'getGantryCrane' })
    }, [getGantryCrane])

    return (
        <div className="GantryCraneVideo001">
            {Data.length === 0 ? (
                <Result status="404" title="暂无监控数据" />
            ) : (
                <div className="Cameras">
                    <div className="List">
                        {Data.length !== 0 &&
                            (() => {
                                const _ = require('lodash')
                                const CamerasList = _.chunk(Data, 6)
                                return CamerasList[PageIndex - 1].map(item => (
                                    <div
                                        key={item.uuid}
                                        style={(() => {
                                            switch (CamerasList[PageIndex - 1].length) {
                                                case 1:
                                                    return { width: '100%', height: '100%' }
                                                case 2:
                                                    return { width: 'calc(50% - 10px)', height: '100%' }
                                                case 3:
                                                    return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                                case 4:
                                                    return { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' }
                                                case 5:
                                                    return {
                                                        width: 'calc((100% / 3) - 10px)',
                                                        height: 'calc(50% - 10px)',
                                                    }
                                                case 6:
                                                    return {
                                                        width: 'calc((100% / 3) - 10px)',
                                                        height: 'calc(50% - 10px)',
                                                    }
                                                default:
                                                    break
                                            }
                                        })()}
                                    >
                                        <Video data={item} date={new Date().getTime()} />
                                    </div>
                                ))
                            })()}
                    </div>
                    <div className="Pagination">
                        <Pagination
                            total={Data.length}
                            showTotal={total => `共${total}条记录 -- 当前第${PageIndex}页`}
                            showSizeChanger={false}
                            pageSize={6}
                            current={PageIndex}
                            onChange={e => setPageIndex(e)}
                        />
                    </div>
                </div>
            )}
        </div>
    )
}
